<template>
  <div>
    <el-row>
      <el-button size="mini" type="primary" @click="handleAdd()"
        >新增</el-button
      >
    </el-row>

    <el-table :data="GoodsList" border style="width: 100%">
      <el-table-column prop="goodsName" label="商品名" align="center">
      </el-table-column>
      <el-table-column prop="goodsType" label="品类" align="center">
      </el-table-column>
      <el-table-column prop="goodsPlace" label="产地" align="center">
      </el-table-column>
      <el-table-column
        prop="goodsDate"
        label="出厂日期"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column prop="goodsLasting" label="保质期" align="center">
      </el-table-column>
      <el-table-column prop="goodsPrice" label="价格" align="center">
      </el-table-column>
      <el-table-column prop="goodsPackage" label="包装规格" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-row>
            <el-popover placement="right" width="400" trigger="click">
              <el-form ref="Goods" :model="Goods" label-width="120px">
                <el-form-item label="商品名">
                  <el-input v-model="Goods.goodsName"></el-input>
                </el-form-item>
                <el-form-item label="商品品类">
                  <el-input v-model="Goods.goodsType"></el-input>
                </el-form-item>
                <el-form-item label="商品材质">
                  <el-input v-model="Goods.goodsMaterial"></el-input>
                </el-form-item>
                <el-form-item label="商品适用规格">
                  <el-input v-model="Goods.goodsDogtype"></el-input>
                </el-form-item>
                <el-form-item label="商品专属规格">
                  <el-input v-model="Goods.goodsExdogtype"></el-input>
                </el-form-item>
                <el-form-item label="商品包装规格">
                  <el-input v-model="Goods.goodsPackage"></el-input>
                </el-form-item>
                <el-form-item label="商品口味">
                  <el-input v-model="Goods.goodsFlavor"></el-input>
                </el-form-item>
                <el-form-item label="商品特殊作用">
                  <el-input v-model="Goods.goodsFunction"></el-input>
                </el-form-item>
                <el-form-item label="商品产地">
                  <el-input v-model="Goods.goodsPlace"></el-input>
                </el-form-item>
                <el-form-item label="商品生产日期">
                  <el-input v-model="Goods.goodsDate"></el-input>
                </el-form-item>
                <el-form-item label="商品保质期">
                  <el-input v-model="Goods.goodsLasting"></el-input>
                </el-form-item>
                <el-form-item label="商品特色说明">
                  <el-input v-model="Goods.goodsFeature"></el-input>
                </el-form-item>
                <el-form-item label="商品价格">
                  <el-input v-model="Goods.goodsPrice"></el-input>
                </el-form-item>
              </el-form>
              <el-button
                size="mini"
                icon="el-icon-search"
                slot="reference"
                circle
                @click="handleQuery(scope.$index, scope.row)"
              ></el-button>
            </el-popover>
            <el-button
              size="mini"
              icon="el-icon-edit"
              circle
              @click="handleEdit(scope.$index, scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete(scope.$index, scope.row)"
            ></el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getGoods } from "@/services/GoodsService.js";
import { deleteById } from "@/services/GoodsService.js";

export default {
  inject: ["reload"],
  data() {
    return {
      GoodsList: [],
      Goods: {
        goodsId: "",
        goodsName: "",
        goodsType: "",
        goodsMaterial: "",
        goodsDogtype: "",
        goodsExdogtype: "",
        goodsPackage: "",
        goodsFlavor: "",
        goodsFunction: "",
        goodsPlace: "",
        goodsDate: "",
        goodsLasting: "",
        goodsFeature: "",
        goodsPrice: "",
        goodsPic: "",
      },
    };
  },
  async created() {
    var resp = await getGoods();
    console.log(resp);
    this.GoodsList = resp;
  },
  methods: {
    handleAdd() {
      this.$router.push({ name: "GoodsAdd" });
    },
    handleQuery(index, row) {
      // console.log(row);
      this.Goods = row;
    },
    handleEdit(index, row) {
      this.$router.push({
        name: "UpdateGoods",
        params: { goodsId: row.goodsId },
      });
    },
    async handleDelete(index, row) {
      await deleteById(row.goodsId);
      this.reload();
    },
  },
};
</script>

<style>
</style>